<!--<template>-->
<!--  <div class="cart">-->
<!--    <h4>全部商品</h4>-->
<!--    <div class="cart-main">-->
<!--      <div class="cart-th">-->
<!--        <div class="cart-th1">全部</div>-->
<!--        <div class="cart-th2">商品</div>-->
<!--        <div class="cart-th3">单价（元）</div>-->
<!--        <div class="cart-th4">数量</div>-->
<!--        <div class="cart-th5">小计（元）</div>-->
<!--        <div class="cart-th6">操作</div>-->
<!--      </div>-->
<!--      <div class="cart-body" v-for="(cart, index) in cartList" :key="index">-->
<!--        <ul class="cart-list">-->
<!--          <li class="cart-list-con1">-->
<!--            <input type="checkbox" name="chk_list" :checked="cart.isChecked == 1" @change="upChange(cart.skuId,$event)"-->
<!--            />-->
<!--          </li>-->
<!--          <li class="cart-list-con2">-->
<!--            <img :src="cart.defaultImage" />-->
<!--            <div class="item-msg">{{ cart.skuName }}</div>-->
<!--          </li>-->
<!--          <li class="cart-list-con4">-->
<!--            <span class="price">{{ cart.singlePrice }}</span>-->
<!--          </li>-->
<!--          <li class="cart-list-con5">-->
<!--            <a href="javascript:void(0)" class="mins" @click="handler('minus', -1, cart)">-</a>-->
<!--            <input autocomplete="off" type='number' :value="cart.conut" minnum="1" class="itxt" @change="handler('change', $event.target.value * 1, cart)"/>-->
<!--            <a href="javascript:void(0)" class="plus" @click="handler('add', +1, cart)">+</a>-->
<!--          </li>-->
<!--          <li class="cart-list-con6">-->
<!--            <span class="sum">{{ cart.totalPrice}}</span>-->
<!--          </li>-->
<!--          <li class="cart-list-con7">-->
<!--            <a @click="delOne(cart.skuId)" class="sindelet">删除</a>-->
<!--            <br />-->
<!--            <a href="#none">移到收藏</a>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="cart-tool">-->
<!--      <div class="select-all">-->
<!--        <input class="chooseAll" type="checkbox" :checked="allChecked" @click="allCheck"/>-->
<!--        <span>全选</span>-->
<!--      </div>-->
<!--      <div class="option">-->
<!--        <a @click="deleteAll">删除选中的商品</a>-->
<!--        <a href="#none">移到我的关注</a>-->
<!--        <a href="#none">清除下柜商品</a>-->
<!--      </div>-->
<!--      <div class="money-box">-->
<!--        <div class="chosed">已选择 <span>0</span>件商品</div>-->
<!--        <div class="sumprice">-->
<!--          <em>总价（不含运费） :</em>-->
<!--          <i class="summoney">{{ subPrice }}</i>-->
<!--        </div>-->
<!--        <div class="sumbtn">-->
<!--          <a class="sum-btn" @click="$router.push('/trade')" >结算</a>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { mapGetters } from "vuex";-->
<!--import {throttle} from 'lodash'-->
<!--import axios from "axios";-->
<!--export default {-->
<!--  name: "ShopCart",-->
<!--  data() {-->
<!--    return {-->
<!--      cartList: [],-->
<!--    };-->
<!--  },-->
<!--  computed: {-->
<!--    ...mapGetters(["cartList"]),-->
<!--    dataList() {-->
<!--      return this.cartList.cartInfoList || [];-->
<!--    },-->
<!--    // 总价-->
<!--    subPrice() {-->
<!--      let sum = 0;-->
<!--      this.dataList.map((item) => [(sum += item.skuNum * item.cartPrice)]);-->
<!--      return sum;-->
<!--    },-->
<!--    // 全选-->
<!--    allChecked() {-->
<!--      return this.dataList.every((item) => item.isChecked == 1) && this.dataList.length;-->
<!--    },-->
<!--  },-->
<!--  methods: {-->
<!--    getData(){-->
<!--      this.$store.dispatch("getShopCartList");-->
<!--    },-->
<!--    // 修改个数-->
<!--    // Input 传递的是最终的数字-->
<!--    //-->
<!--    // _.throttle(function(index){-->
<!--    //       this.currentIndex=index-->

<!--     handler:throttle(async function(type, disnum, cart) {-->
<!--      console.log("派发的事件", type, disnum, cart);-->
<!--      switch (type) {-->
<!--        case "add":-->
<!--          disnum = 1;-->
<!--          break;-->
<!--        case "minus":-->
<!--          // 判断产品的数量是否大于1，如果大于1的话，可以给-1，如果小于等于1，就给0-->
<!--          disnum=cart.skuNum>1?-1:0-->
<!--          break;-->
<!--          // 用户输入的最终数据，判断是否为数字，如果不为数字或者小于0，让disnum=0-->
<!--          case 'change':-->
<!--            if(isNaN(disnum)|| disnum<1){-->
<!--              disnum=0-->
<!--            }else(-->
<!--              disnum=parseInt(disnum)-cart.skuNum-->
<!--            )-->
<!--      }-->
<!--      // 派发事件-->
<!--      try {-->
<!--        await this.$store.dispatch("getCarData", {-->
<!--          skuId: cart.skuId,-->
<!--          skuNum: disnum,-->
<!--        });-->
<!--        this.getData()-->
<!--      } catch (error) {-->
<!--        alert(error.message);-->
<!--      }-->
<!--    },1000),-->
<!--    // 删除数据-->
<!--    async delOne(skuId){-->
<!--      console.log(skuId);-->
<!--      try {-->
<!--        await this.$store.dispatch('deleteOne',skuId)-->
<!--        this.getData()-->
<!--      } catch (error) {-->
<!--        alert(error.message)-->
<!--      }-->
<!--    },-->
<!--    // 切换选中状态-->
<!--    async upChange(skuId,event){-->
<!--      try {-->
<!--        // console.log(event.target.checked);-->
<!--      // 传递过去的参数，真的时候为选中1，假的为没选中0-->
<!--      let isChecked=event.target.checked?1:0-->
<!--      // key   value  一样可以省略-->
<!--      await this.$store.dispatch('updateCheck',{skuId,isChecked})-->
<!--      this.getData()-->
<!--      } catch (error) {-->
<!--         alert(error.message)-->
<!--      }-->

<!--    },-->
<!--    // 删除选中的对个-->
<!--    async deleteAll(){-->
<!--      try {-->
<!--        await this.$store.dispatch('deleteAllCheck')-->
<!--        this.getData()-->
<!--      } catch (error) {-->
<!--        alert(error.message)-->
<!--      }-->

<!--    },-->
<!--    // 点击 全选-->
<!--    async allCheck(event){-->
<!--      try {-->
<!--        let isChecked=event.target.checked?1:0-->
<!--        await this.$store.dispatch('allCheck',isChecked)-->
<!--        this.getData()-->

<!--      } catch (error) {-->
<!--         alert(error.message)-->
<!--      }-->

<!--    },-->
<!--    //查询我的购物车内容-->
<!--    queryMyCart(){-->
<!--      axios({-->
<!--        url: '/member/memberCart/queryMyCart',-->
<!--        method: 'get'-->
<!--      }).then(response =>{-->
<!--        console.log(response.data)-->
<!--        this.cartList = response.data;-->
<!--      })-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.getData();-->
<!--    this.queryMyCart();-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style lang="less" scoped>-->
<!--.cart {-->
<!--  width: 1200px;-->
<!--  margin: 0 auto;-->

<!--  h4 {-->
<!--    margin: 9px 0;-->
<!--    font-size: 14px;-->
<!--    line-height: 21px;-->
<!--  }-->

<!--  .cart-main {-->
<!--    .cart-th {-->
<!--      background: #f5f5f5;-->
<!--      border: 1px solid #ddd;-->
<!--      padding: 10px;-->
<!--      overflow: hidden;-->

<!--      & > div {-->
<!--        float: left;-->
<!--      }-->

<!--      .cart-th1 {-->
<!--        width: 25%;-->

<!--        input {-->
<!--          vertical-align: middle;-->
<!--        }-->

<!--        span {-->
<!--          vertical-align: middle;-->
<!--        }-->
<!--      }-->

<!--      .cart-th2 {-->
<!--        width: 25%;-->
<!--      }-->

<!--      .cart-th3,-->
<!--      .cart-th4,-->
<!--      .cart-th5,-->
<!--      .cart-th6 {-->
<!--        width: 12.5%;-->
<!--      }-->
<!--    }-->

<!--    .cart-body {-->
<!--      margin: 15px 0;-->
<!--      border: 1px solid #ddd;-->

<!--      .cart-list {-->
<!--        padding: 10px;-->
<!--        border-bottom: 1px solid #ddd;-->
<!--        overflow: hidden;-->

<!--        & > li {-->
<!--          float: left;-->
<!--        }-->

<!--        .cart-list-con1 {-->
<!--          width: 15%;-->
<!--        }-->

<!--        .cart-list-con2 {-->
<!--          width: 35%;-->

<!--          img {-->
<!--            width: 82px;-->
<!--            height: 82px;-->
<!--            float: left;-->
<!--          }-->

<!--          .item-msg {-->
<!--            float: left;-->
<!--            width: 150px;-->
<!--            margin: 0 10px;-->
<!--            line-height: 18px;-->
<!--          }-->
<!--        }-->

<!--        .cart-list-con4 {-->
<!--          width: 10%;-->
<!--        }-->

<!--        .cart-list-con5 {-->
<!--          width: 17%;-->

<!--          .mins {-->
<!--            border: 1px solid #ddd;-->
<!--            border-right: 0;-->
<!--            float: left;-->
<!--            color: #666;-->
<!--            width: 6px;-->
<!--            text-align: center;-->
<!--            padding: 8px;-->
<!--          }-->

<!--          input {-->
<!--            border: 1px solid #ddd;-->
<!--            width: 40px;-->
<!--            height: 33px;-->
<!--            float: left;-->
<!--            text-align: center;-->
<!--            font-size: 14px;-->
<!--          }-->

<!--          .plus {-->
<!--            border: 1px solid #ddd;-->
<!--            border-left: 0;-->
<!--            float: left;-->
<!--            color: #666;-->
<!--            width: 6px;-->
<!--            text-align: center;-->
<!--            padding: 8px;-->
<!--          }-->
<!--        }-->

<!--        .cart-list-con6 {-->
<!--          width: 10%;-->

<!--          .sum {-->
<!--            font-size: 16px;-->
<!--          }-->
<!--        }-->

<!--        .cart-list-con7 {-->
<!--          width: 13%;-->

<!--          a {-->
<!--            color: #666;-->
<!--          }-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  .cart-tool {-->
<!--    overflow: hidden;-->
<!--    border: 1px solid #ddd;-->

<!--    .select-all {-->
<!--      padding: 10px;-->
<!--      overflow: hidden;-->
<!--      float: left;-->

<!--      span {-->
<!--        vertical-align: middle;-->
<!--      }-->

<!--      input {-->
<!--        vertical-align: middle;-->
<!--      }-->
<!--    }-->

<!--    .option {-->
<!--      padding: 10px;-->
<!--      overflow: hidden;-->
<!--      float: left;-->

<!--      a {-->
<!--        float: left;-->
<!--        padding: 0 10px;-->
<!--        color: #666;-->
<!--      }-->
<!--    }-->

<!--    .money-box {-->
<!--      float: right;-->

<!--      .chosed {-->
<!--        line-height: 26px;-->
<!--        float: left;-->
<!--        padding: 0 10px;-->
<!--      }-->

<!--      .sumprice {-->
<!--        width: 200px;-->
<!--        line-height: 22px;-->
<!--        float: left;-->
<!--        padding: 0 10px;-->

<!--        .summoney {-->
<!--          color: #c81623;-->
<!--          font-size: 16px;-->
<!--        }-->
<!--      }-->

<!--      .sumbtn {-->
<!--        float: right;-->

<!--        a {-->
<!--          display: block;-->
<!--          position: relative;-->
<!--          width: 96px;-->
<!--          height: 52px;-->
<!--          line-height: 52px;-->
<!--          color: #fff;-->
<!--          text-align: center;-->
<!--          font-size: 18px;-->
<!--          font-family: "Microsoft YaHei";-->
<!--          background: #e1251b;-->
<!--          overflow: hidden;-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</style>-->


<template>
  <div>
    <div>
      <el-table :data="cartCookingList" stripe :cell-style="rowClass" :header-cell-style="headClass" border height="500"
                tooltip-effect="dark" style="width: 90%;margin-left: 80px" @select="handleSum" @select-all="handleSum"
                ref="cartTable">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="defaultImage" label="商品图片" width="120">
          <template slot-scope="scope">
            <img :src="scope.row.defaultImage" style="height: 90px">
          </template>
        </el-table-column>
        <el-table-column prop="skuName" label="商品名称" width="350"></el-table-column>
        <el-table-column prop="singlePrice" label="商品单价" :formatter="formatter" width="150"></el-table-column>
        <el-table-column label="商品数量" width="200">
          <template slot-scope="scope">
            <el-button-group>
              <el-button @click="changeBuyCount(scope.row.skuId,-1)">一</el-button>
              <el-button>{{ scope.row.conut }}</el-button>
              <el-button @click="changeBuyCount(scope.row.skuId,1)">十</el-button>
            </el-button-group>
          </template>
        </el-table-column>
        <el-table-column prop="totalPrice" label="商品小计" :formatter="formatter" width="150"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="goDetail(scope.row.skuId)">商品详情</el-button>
            <el-button type="danger" plain icon="el-icon-delete" @click="changeBuyCount(scope.row.skuId,0)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="buttonTotal">
        <el-button-group>
          <el-button>总计:</el-button>
          <el-button>￥{{ totalPrice }}.00</el-button>
        </el-button-group>
        <el-button type="danger" round @click="toOrderAddress" style="margin-left: 30px">去下单</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MyCart",
  data() {
    return {
      cartCookingList: [],
      totalPrice: 0,
      selected: 0,
    }
  },
  methods: {
    //查询我的购物车内容
    queryMyCart() {
      axios({
        url: '/member/memberCart/queryMyCart',
        method: 'get'
      }).then(response => {
        this.cartCookingList = response.data;
      })
    },
    //改变购物车商品数量,小计,删除
    changeBuyCount(skuId, count) {
      axios({
        url: '/member/memberCart/updateCartCount',
        method: 'post',
        data: {
          skuId: skuId,
          count: count
        }
      }).then(response => {
        this.totalPrice = 0;
        this.queryMyCart();
      })
    },
    //计算总价
    handleSum(selection, row) {
      this.totalPrice = 0;
      this.$nextTick(() => {
        this.$refs.cartTable.selection.forEach(item => {
          this.totalPrice += (item.conut * item.singlePrice);
        })
      });
      this.selected = selection.length && this.$refs.cartTable.selection.indexOf(row) !== -1;
      //打印出来的数据 就是勾选获取的勾选那一行的数据
      console.log(this.$refs.cartTable.selection);
      /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的yilist这个数组了
      this.yilist = this.$refs.cartTable.selection.map((item) => item.skuId);
      // 现在yilist 这个数组 就是由我勾选每一行的id组成的数组了 这个数组里全是勾选那行的id
    },
    handleSelectionChange() {

    },
    //去下单
    toOrderAddress() {
      if (this.selected !== 0) {
        let skuIds = this.yilist;
        // console.l--og(JSON.stringify(skuIds),JSON.parse(JSON.stringify(skuIds)))
        sessionStorage.setItem("skuIds",JSON.stringify(skuIds));
        this.selected = 0;
        this.$router.push("/trade")
      } else {
        alert("请至少选择一项商品后去下单")
      }
    },
    //去商品详情
    goDetail(idss) {
      localStorage.setItem("skuId", idss)
      this.selected = 0;
      this.$router.push(`/detail/${idss}`)
    },
    formatter() {
      return "￥" + arguments[2] + '.00'
    },
    // 表头样式设置
    headClass() {
      return 'text-align: center;background:rgb(176,224,230);color:black;font-size:15px'
    },
    // 表格样式设置
    rowClass() {
      return 'text-align: center; font-size:15px;'
    }
  },
  created() {
    this.queryMyCart();
  }
}
</script>

<style scoped>
/*.collect-header {*/
/*  height: 64px;*/
/*  background-color: #fff;*/
/*  border-bottom: 2px solid #ff6700;*/
/*}*/

.collect-header .collect-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 58px;
  font-size: 28px;
}

.buttonTotal {
  position: relative;
  width: 300px;
  left: 1050px;
  top: -20px;
  margin-top: 50px;
}
</style>